<!-- 班级推送 -->
<template>
    <div class="app-container">
        <el-form :inline="true" :model="searchObj" class="demo-form-inline">
            <el-form-item label="计划名">
                <el-input v-model="searchObj.title" placeholder="计划名"></el-input>
            </el-form-item>
            <el-form-item label="计划上线日期">
                <el-date-picker
                    v-model="searchObj.pushDate"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="pageSchedule()">查询</el-button>
                <el-button type="success" @click="dialogFormVisible=true">新建计划</el-button>
            </el-form-item>
        </el-form>
        <el-button
            type="danger"
            :disabled="deleteBatchButton"
            @click="deletePush(multipleSelection)"
        >批量删除</el-button>

        <!--*******************************表格数据*******************************-->
        <el-table :data="pushes" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="标题" prop="title" width="180"></el-table-column>
            <el-table-column label="推送日期" width="220">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.pushDate.slice(0,10) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="持续天数" prop="last" width="180"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="getPushById(scope.row.id)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="info"
                        @click="$router.push({
                        name:'ScheduleInfo',
                        params:{'id':scope.row.id}
                    })"
                    >详情</el-button>
                    <el-button size="mini" type="danger" @click="deletePush([scope.row.id])">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--*******************************分液器*******************************-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page="current"
            :hide-on-single-page="true"
            :page-sizes="[6, 15, 20, 30, 40, 50]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
        <!--            :hide-on-single-page="true"-->

        <!--*******************************添加或修改计划对话框*******************************-->
        <el-dialog
            title="推送计划"
            :visible.sync="dialogFormVisible"
            @close="dialogFormVisible=false,push={}"
            width="30%"
        >
            <el-form :model="push">
                <el-form-item label="计划标题">
                    <el-input v-model="push.title" style="width:80%"></el-input>
                </el-form-item>
                <el-form-item label="上线日期">
                    <el-date-picker
                        v-model="push.pushDate"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        style="width:44%"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="持续天数">
                    <el-input-number
                        v-model="push.last"
                        :min="0"
                        :max="100"
                        style="width:44%"
                        controls-position="right"
                    ></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false,push={}">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdatePush()">确 定</el-button>
            </div>
        </el-dialog>
        <el-backtop :visibility-height="100"></el-backtop>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import pushApi from "@/api/course/push";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            searchObj: {},
            current: 1,
            limit: 6,
            total: 0,
            pushes: [],
            multipleSelection: [],
            push: {},
            dialogFormVisible: false,
        };
    },
    //监听属性 类似于data概念
    computed: {
        deleteBatchButton() {
            return this.multipleSelection.length === 0;
        },
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        pageSchedule(page = 1) {
            this.current = page;
            pushApi
                .pagePush(this.current, this.limit, this.searchObj)
                .then((response) => {
                    this.pushes = response.data.pushes;
                    this.total = response.data.rows;
                });
        },
        handleSizeChange(val) {
            this.current = parseInt((this.current * this.limit) / val);
            this.limit = val;
            this.pageSchedule(this.current);
        },
        handleCurrentChange(val) {
            this.pageSchedule(val);
        },
        handleSelectionChange(val) {
            this.multipleSelection = [];
            for (var i = 0; i < val.length; i++) {
                this.multipleSelection.push(val[i].id);
            }
        },
        deletePush(ids) {
            this.$confirm("确定要删除吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    pushApi.deletePush(ids).then((response) => {
                        this.pageSchedule();
                        this.$message({
                            message: "删除成功",
                            type: "success",
                        });
                    });
                })
                .catch(() => {});
        },

        getPushById(id) {
            pushApi.getPushById(id).then((response) => {
                this.push = response.data.push;
                this.dialogFormVisible = true;
            });
        },
        saveOrUpdatePush() {
            pushApi.saveOrUpdatePush(this.push).then((response) => {
                this.pageSchedule();
                this.dialogFormVisible = false;
                this.push = {};
                this.$message({
                    message: "保存成功",
                    type: "success",
                });
            });
        },

        init() {
            this.pageSchedule();
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.init();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发，页面一旦激活就会触发
};
</script>
<style scoped>
</style>